const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
class MyPlugin {
    // apply是webpack官方规定的具名钩子
    apply(compiler) {
        // Compiler 模块是 webpack 的主要引擎，它通过 CLI 或者 Node API 传递的所有选项创建出一个 compilation 实例。 它扩展（extends）自 Tapable 类，用来注册和调用插件。 大多数面向用户的插件会首先在 Compiler 上注册
        // thisCompilation：初始化 compilation 时调用，在触发 compilation 事件之前调用。这个钩子 不会 被复制到子编译器。
        compiler.hooks.thisCompilation.tap('MyPlugin', (compilation) => {
            // Compilation 模块会被 Compiler 用来创建新的 compilation 对象（或新的 build 对象）。 compilation 实例能够访问所有的模块和它们的依赖（大部分是循环依赖）。 它会对应用程序的依赖图中所有模块， 进行字面上的编译(literal compilation)。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)
            compilation.hooks.processAssets.tap({
                name: 'MyPlugin',
                stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages,
            },
                (assets) => {
                    console.debug('%c  222', 'font-size:30px;', 222)
                    console.log('List of assets and their sizes:');
                    Object.entries(assets).forEach(([pathname, source]) => {
                        console.log(`— ${pathname}: ${source.size()} bytes`);
                        if (pathname.endsWith('.js')) {
                            const withoutComments = source
                                .source()
                                .replace(/\/\*\*+\*\//g, ''); // 将打包的js文件中注释去掉
                            // 处理打包的对应文件后将新的内容透出
                            compilation.assets[pathname] = {
                                source: () => withoutComments, // *文件资源
                                size: () => withoutComments.length, // *文件大小
                            };
                        }
                    });
                })
        })
    }
}


module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
        // publicPath: 'dist/'
    },
    devServer:{
        static: {
            // 可以在开发阶段启动的服务中访问public下的这些文件,默认是public
            directory: path.join(__dirname, './public2'),  
        },
    },

    
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader', // 将js中的es6语法转换为es5语法，例如const改为var
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.png$/,
                use: {
                    loader: 'url-loader',//  url-loader 实际上是 file-loader 的一个上层封装。小文件用url-loader，大文件用file-loader
                    options: {
                        limit: 10 * 1024 // 10 KB
                    }
                }
            },
            {
                test: /.html$/,
                use: { // 版本不同 配置方式不一样,当前最新版本,下面配置有问题
                    loader: 'html-loader', //  html-loader 是一个用于Webpack的加载器（loader），它的主要作用是处理HTML文件中的资源，如图片、SVG、字体等，并将它们转换为Webpack能够理解和处理的模块。
                    // options: {
                    //     attrs: ['img:src', 'a:href']
                    // }
                }
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(), // 清除dist目录
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            title: 'Webpack App',
            inject: 'body'
        }),
        new MyPlugin(),
    // // 开发阶段最好不要使用这个插件
    // new CopyWebpackPlugin({
    //     patterns: [
    //         {
    //             from: path.resolve(__dirname, 'public'),
    //             to: path.resolve(__dirname, 'dist'),
    //         }
    //     ]

    // })
    ]
}
